<template>
  <m-menu
    :data="menuData"
    :collapse="collapse"
    :router="true"
    :defaultActive="$route.path"
  ></m-menu>
  <!-- <el-menu
    default-active="/"
    class="el-menu-vertical-demo"
    :collapse="collapse"
  >
    <el-menu-item
      v-for="item in menuData"
      :key="item.name"
      :index="item.index"
      @click="onClick(item.index)"
    >
      <component :is="item.icon"></component>
      <template #name> {{ item.name }}</template>
    </el-menu-item>
  </el-menu> -->
</template>

<script setup lang="ts">
defineProps<{ collapse: boolean }>();
let menuData = [
  {
    name: "首页",
    index: "/",
    icon: "house",
  },
  {
    name: "选择图标",
    index: "/choose-icon",
    icon: "lollipop",
  },
  {
    name: "选择区域",
    index: "/choose-area",
    icon: "position",
  },
  {
    name: "趋势标记",
    index: "/trend",
    icon: "sort",
  },
  {
    name: "通知菜单",
    index: "/notification",
    icon: "clock",
  },
  {
    name: "菜单menu",
    index: "/menu",
    icon: "menu",
  },
  {
    name: "进度条",
    index: "/progress",
    icon: "sugar",
  },
  {
    name: "时间选择",
    index: "/choose-time",
    icon: "drizzling",
  },
  {
    name: "城市选择",
    index: "/choose-city",
    icon: "position",
  },
  {
    name: "表单",
    index: "/form",
    icon: "mug",
  },
  {
    name: "弹窗表单",
    index: "/modal-form",
    icon: "iceCreamSquare",
  },
  {
    name: "表格",
    index: "/table",
    icon: "iceCreamSquare",
  },
];
</script>

<style scoped></style>
